<!DOCTYPE html>
<html>

<!-- HEAD SECTION -->
<head>

<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content=""/>
<meta name="author" content=""/>

<title>IYTE PRT</title>

<!-- CSS SECTION -->
<style type="text/css">
   a {border:0; text-decoration: none;}
   #btn {text-align: center;}
</style>

<!-- EXTERNAL RESOURCES SECTION -->
<link href="jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script> 
<!-- <script src="jquery.mobile-1.3.0.min.js" type="text/javascript"></script> -->

<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.min.js"></script>
<!-- <script type="text/javascript" src="jquery-migrate-1.0.0.js"></script> -->
<script type="text/javascript" src="jquery.qtip.min.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>

<script type="text/javascript">
document.addEventListener("deviceready",onDeviceReady,false);
</script>
<script src="MobileMan.js" type="text/javascript"></script> 

<script type="text/javascript">

alert(navigator.network.connection.type);
function onDeviceReady() {
navigator.network.isReachable('10.8.37.218', reachableCallback, {});
alert(navigator.network.connection.type);
  }
 
 
function reachableCallback(reachability) {
        // There is no consistency on the format of reachability
        var networkState = navigator.network.connection.type;

        var states = {};
        states[NetworkStatus.NOT_REACHABLE]                      = 'No network connection';
        states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
        states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK]         = 'WiFi connection';

        alert('Connection type: ' + states[networkState]);

        if(networkState == NetworkStatus.NOT_REACHABLE)
          console.log("Erdem sus len" + networkState );
          app.exitApp();
    }
    
</script>

</head>

<!-- BODY SECTION-->
<body>

<!-- HOMEPAGE-->
   <div data-role="page" class="section" id="homepage">
      <div class="header" data-role="header">
         <h1>PRT Yönetim Paneli</h1>
      </div>
      <div class="content" data-role="content" id="content1">
         <p style="text-align:center"><img src="images/iytelogo.gif" alt="IYTE Logo"></p>
         <center><a href="#carpage" data-transition="slide"><button type="button" border="0">Araçları Yönet</button></a></center> 
         <center><a href="#stationpage" data-transition="slide"><button type="button" border="0">İstasyonları Yönet</button></a></center>
      </div>
      <div class="footer" data-role="footer">
      </div>
   </div>


<!-- CAR MANAGEMENT PAGE -->
   <div data-role="page" class="section" id="carpage">
      <div class="header" data-role="header">
         <a href="#homepage" data-role="button" data-rel="back" data-icon="arrow-l" data-theme="c">Back</a>
         <h1>PRT Yönetim Paneli</h1></div>
      <div class="content" data-role="content" id="content2">
         <div id="car" name="car">
            <select name="selectCar" class="span12" id="selectCar" onchange="callCarInfo();">
            <option value="-1">Bir araç seçiniz.</option>
            <option value="1">Araç 1</option>
            <option value="2">Araç 2</option>
            <option value="3">Araç 3</option>
            <option value="4">Araç 4</option>
            <option value="5">Araç 5</option>
            </select>
         </div>
         <div id="cinfo"></div>
         <p>&nbsp;</p>
         <hr />
         <div data-role="controlgroup" data-type="horizontal" id="btn">
         <button type="button" border="0" data-theme="a"  onClick='var e=document.getElementById("selectCar"); sendCommand(1,e.value);'><p style="font-size:0.7em" >Başlat</p></button> 
         <button type="button" border="0" data-theme="a"  onClick='var e=document.getElementById("selectCar"); sendCommand(2,e.value);'><p style="font-size:0.7em" >Durdur</p></button>
         <button type="button" border="0" data-theme="a"  onClick='var e=document.getElementById("selectCar"); sendCommand(3,e.value);'><p style="font-size:0.7em" >Şarja Gönder</p></button>
         </div>
         <a href="#car_statistics" data-transition="slide"><button type="button" border="0" data-theme="a">Araç İstatistikleri</button></a>
         <a href="#sensor" data-transition="slide"><button type="button" border="0" data-theme="a">Araç Sensörleri</button></a>
         <!-- 'var e=document.getElementById("selectCar");callCarSensor(e.value);' -->
         </div>
      <div class="footer" data-role="footer">
      </div>
   </div>

<!-- CAR STATISTICS PAGE -->
   <div data-role="page" class="section" id="car_statistics">
      <div class="header" data-role="header">
         <a href="#carpage" data-role="button" data-rel="back" data-icon="arrow-l" data-theme="c">Back</a>
         <h1>PRT Yönetim Paneli</h1>
      </div>
      <div class="content" data-role="content" id="content7">
         <select id = "carGraph" name="carGraph" class="span12" onchange="prt_graph();">
            <option value="">Bir grafik öğesi seçiniz.</option>
            <option value="freeSeats">Boş Koltuk</option>
            <option value="battery">Pil</option>
            <option value="distanceTravelled">Gittiği Toplam Mesafe</option>
            <option value="speed">Hız</option>
         </select>
         <div id="prt_flot" style="width: 300px; height: 250px;"></div>
      </div>
      <div class="footer" data-role="footer">
      </div>
   </div>

<!-- CAR SENSOR PAGE -->
   <div data-role="page" class="section" id="sensor">
      <div class="header" data-role="header">
         <a href="#carpage" data-role="button" data-rel="back" data-icon="arrow-l" data-theme="c">Back</a>
         <h1>Sensörler</h1>
      </div>
      <div class="content" data-role="content" id="content6">
         <p><strong>Sensör 1: </strong>Çalışıyor</p>
         <p><strong>Sensör 2: </strong>Çalışmıyor</p>
         <p><strong>Sensör 3: </strong>Çalışıyor</p>
         <p><strong>Sensör 4: </strong>Çalışıyor</p>
         <p><strong>Sensör 5: </strong>Çalışmıyor</p>
      </div>
      <div class="footer" data-role="footer">
      </div>
   </div>

<!-- STATION MANAGEMENT PAGE -->
   <div data-role="page" class="section" id="stationpage">
      <div class="header" data-role="header">
         <a href="#homepage" data-role="button" data-rel="back" data-icon="arrow-l" data-theme="c">Back</a>
         <h1>PRT Yönetim Paneli</h1>
      </div>
      <div class="content" data-role="content" id="content3">
         <div id="station">
            <select name="selectStation" class="span12" id="selectStation" onchange="stationInfo(this);">
            <option value="-1">Bir istasyon seçiniz.</option>
            <option value="1">İstasyon 1</option>
            <option value="2">İstasyon 2</option>
            <option value="3">İstasyon 3</option>
            <option value="4">İstasyon 4</option>
            <option value="5">İstasyon 5</option>
            </select>
         </div>
         <div id="sinfo">
            <p>&nbsp;</p>   
         </div>
         <hr >
         <center><a href="#statistics" data-transition="slide"><button type="button" border="0">Yolcu İstatistikleri</button></a></center>
      </div>
      <div class="footer" data-role="footer">
      </div>
   </div>

<!-- STATION STATISTICS PAGE -->
   <div data-role="page" class="section" id="statistics">
      <div class="header" data-role="header">
         <a href="#stationpage" data-role="button" data-rel="back" data-icon="arrow-l" data-theme="c">Back</a>
         <h1>PRT Yönetim Paneli</h1>
      </div>
      <div class="content" data-role="content" id="content5">
         <select class="span12" id="sta_statistic" onchange="sta_graph();" >
            <option value="">Bir grafik seçiniz.</option>
            <option value="numberOfPassenger">Yolcu Sayısı/Zaman</option>
         </select>
         <div id="sta_flot" style="width: 300px; height: 250px;"></div>
      </div>
      <div class="footer" data-role="footer">
      </div>
   </div>

</body>

</html>
